<template>
  <div>
    <input type="checkbox" v-model="hasScopedSlots" id="has-demo-use-scoped-slots" />
    <label for="has-demo-use-scoped-slots">hasScopedSlots</label>
    <hr />
    <DemoScopedSlots :data="data">
      <template v-slot="{ node: { data }, index }" v-if="hasScopedSlots">
        <label>{{ index }}-</label>
        <label>{{ data.name }}-</label>
        <label>{{ data.age }}</label>
      </template>
    </DemoScopedSlots>
  </div>
  <p v-if="!data.length">加载中...</p>
</template>

<script>
import { DemoScopedSlots } from "./demo-use-scoped-slots-components";

const delay = (d)=>new Promise(r=>setTimeout(r,d));

async function getData(){
  await delay(1000);
  return [
        { name: "chenwl", age: 28 },
        { name: "zhangsan", age: 27 }
      ]
}

export default {
  name:"demo-use-scoped-slots",
  data() {
    return {
      hasScopedSlots: true,
      data: []
    };
  },
  async created(){
      this.data = await getData();
  },
  components: {
    DemoScopedSlots
  }
};
</script>

<style lang="scss">
.demo-use-scoped-slots-components {
  &:not(.demo-use-scoped-slots-components-has-default){
    background-color: #f2f2f2;
  }
}
</style>